<template>
  <dv-border-box-8 style="height: 320px; padding: 5px">
    <dv-decoration-7 style="height: 30px; text-align: center"
      >各价格区间销量数量排行</dv-decoration-7
    >
    <dv-scroll-ranking-board
      id="chart12"
      :config="config"
      style="height: 290px; width: 95%; margin: auto"
    />
  </dv-border-box-8>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      config: {},
      orderBy: 0,
    };
  },
  watch: {
    "$store.state.orderBy"(newVal) {
      this.orderBy = newVal;
      this.get_list();
    },
  },
  mounted() {
    this.get_list();
  },
  methods: {
    getName(str) {
      let arr = [];
      arr = str
        .split(",")
        .map((v) =>
          v == v.replace("(", "") ? v.replace("]", "") : v.replace("(", "")
        );
      return arr[0] + "元到" + arr[1] + "元";
    },
    get_list() {
      echarts.dispose(document.getElementById("chart12"));
      this.$http
        .get(`/bill/priceRangeRank?orderBy=${this.orderBy}`)
        .then((res) => {
          this.config = {
            data: res.data.map((v) => {
              return {
                name: this.getName(v.name),
                value: v.totalQuantity,
              };
            }),
            unit: "份",
          };
        });
    },
  },
};
</script>

<style>
</style>
